<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>carousel模块快速使用</title>
		<link rel="stylesheet" href="../../assets/layui/css/layui.css" media="all">
		<style type="text/css">
			.wp {
				color: red;
			}

			.me {
				color: pink;
			}
		</style>
	</head>
	<body>
		<div id="vm">
			<span v-html="vs"></span>

			{{ad}}
			<div>
				wp love
			</div>
		</div>
		<!-- 条目中可以是任意内容，如：<img src=""> -->

		<script src="../../assets/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../assets/layui/layui.js"></script>
		<script src="../../assets/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			layui.use('carousel', function() {
				var carousel = layui.carousel;
				//建造实例
				carousel.render({
					elem: '#test1',
					width: '100%' //设置容器宽度
						,
					arrow: 'always' //始终显示箭头
					//,anim: 'updown' //切换动画方式
				});
			});
		</script>

		<script type="text/javascript">
			var app = new Vue({
				el: "#vm",
				data: {
					list: [],
					ad: 0,
					vs: "we"
				},
				created() {
					// this.wp();
					console.log(this.ad);
					// this.vs =
					// 	"http://mingchaodianlan.dev244.ynccxx.cn/uploads/20210722/7013f0fc7b73579e111516a341fd6dd7.mp4"
				},
				computed: {
					vs: function() {
						return '<video height="360px" autoplay="autoplay" controls="controls"><source src="${this.vs}" type="video/mp4"></source> </video>'
					}
				},
				methods: {
					wp() {
						// 原生ajax
						var ajax = new XMLHttpRequest();
						ajax.open('get', 'http://shandazhubao.dev244.ynccxx.cn/index.php/api/api/index');
						ajax.send();
						ajax.onreadystatechange = function() {
							if (ajax.readyState == 4 && ajax.status == 200) {
								//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
								// console.log(ajax.responseText); //输入相应的内容
								console.log(18);
								console.log(JSON.parse(ajax.responseText));
								// this.list = JSON.parse(ajax.responseText).data.ad
								console.log(this.list);


							}
						}
					}
				}
			})
		</script>
		<script type="text/javascript">
			$(document).ready(function() {
				// alert(18)
				app.$data.ad = 90
				app.$data.list = [
					"http://shandazhubao.dev244.ynccxx.cn/template/default/jewel/image/banenr2.png",
					"http://shandazhubao.dev244.ynccxx.cn/template/default/jewel/image/banenr2.png"
				];
				console.log(app.$data.list);
			})
		</script>
	</body>
</html>
